<template>
<div>
     <topbar title="个人信息"></topbar>
 <div class="topbar">
     <van-uploader :after-read="afterRead">
          <img class="userImage" :src="img" alt="">
          <div class="iconfont"></div>
        </van-uploader>
     
 </div>
 <div class="content">
    <div class="main">
        <li>
            <div>
            <h1>昵称</h1>
            </div>
            <p><input v-model="nickname" placeholder="请输入昵称"><span></span></p>
        </li>
        <li>
            <div>
            <h1>电话</h1>
            </div>
            <p><input :placeholder="phone" readonly="readonly"><span></span></p>
        </li>
        <li>
            <div>
            <h1>服务区域</h1>
            </div>
            <p><input v-model="address" placeholder="请输入服务区域"><span></span></p>
        </li>
        <li>
            <div>
            <h1>服务地址</h1>
            </div>
            <p><input v-model="area" placeholder="请输入服务地址"><span></span></p>
        </li>
    </div>
    <div class="footer">
            <van-button @click="setUser" size="large">立即提交</van-button>
        </div>
 </div>
</div>
</template>

<script>
import topbar from "../components/topNav.vue" 
import api from "../axios/api.js";
export default {
    
    data() {
            return {
                phone:"等待获取",
                ID:"",
                nickname:"",
                address:"",
                area:"",
                img:null,
            }
        },

       
        mounted(){
         let ID = localStorage.getItem("ID")
          this.ID = ID
         if(localStorage.getItem("id")){
            this.ID = localStorage.getItem("id")
         }
          this.getuser()
          // the.requstPost(api.userInfo,{id:the.id});
        },
        methods:{
            afterRead(file) {
            // 此时可以自行将文件上传至服务器
            
            let data = {
              id:this.ID,
              file,
            }
            this.$post(api.upimg,data).then(res => {
            if (res.code == 1) {
              this.$toast.success(res.msg);
              this.getuser()
                  }else{
              this.$toast.fail(res.msg);
            }
            });
          },
        
          getuser(){
            this.$post(api.userInfo,{id:this.ID}).then(
              res => {
            if (res.code == 200) {
                // this.$toast.success(res.msg);
                this.nickname = res.data.nickname
                this.address = res.data.address
                this.phone = res.data.phone
                this.area = res.data.area
                this.img = res.data.head_img
                if(this.wx){
                this.nickname = localStorage.getItem("nickname")
                this.img = localStorage.getItem("headimgurl")
              }
                  }else{
              this.$toast.fail(res.msg);
            }
          });
          },
          setUser(){
          
                let data = {
                id: this.ID,
                nickname:this.nickname,
                address:this.address,
                area:this.area,
                };
                
            this.$post(api.setUser,data).then(res => {
            if (res.code == 200) {
              this.$toast.success(res.msg);
                  }else{
              this.$toast.fail(res.msg);
            }
          });
          
        },
        
},
 components:{
            topbar
        },
        
}
</script>

<style lang="less" scoped>
.space {
  padding-top: 10px;
  background-color: #f6f6f6;
}
.space1 {
  height: 80px;
  background-color: #f6f6f6;
}
  .content {
    width: 100%;
    height: 100%;
    background-color: #f6f6f6;
    .main {
      width: 100%;
      margin: 0 auto; 
      background-color: #fff;
      li {
        width: 95%;
        height: 45px;
        background-color: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f6f6f6;
        margin-left: 15px;
        div{
          display: flex;
          align-items: center;
          h1 {
            font-weight: 500;
            font-size: 15px;
            margin-left: 10px;
            }
        }
        input {
          font-size: 15px;
          width: 120px;
          border: none;
          color: #7a7a7a;
          
        }
        span {
          content: "";
          display: inline-block;
          width: 8px;
          height: 14px;
          background:url("../assets/矢量智能对象 拷贝 5.png") no-repeat;
          background-size: 100%;
          margin-right: 20px;
          margin-left: 10px;
        }
        
      }
    }
    
  }
  .topbar {
      text-align: center;
      margin: 30px;
      :nth-child(2) {
        display: flex;
        justify-content: space-around;
      }
      img {
          width: 100px;
          height: 100px;
      }
     
  }
  
 .van-button--large{
            width: 80%;
            height: 50px;
            border-radius: 30px;
        }
        .footer {
            background-color: #fff;
            height: 220px;
            text-align: center;
            padding-top: 30px;
            button{
            background-image: linear-gradient(#04c2f3,#0295d2);
            color: #fff;
            }
         
        }
  .topbar img{
    border-radius: 50%;
  }                         
</style>